.homePage {
    padding:16px;
    .homeHeader{
        height: 175px;
        border-radius: 8px;
        position: relative;
        color: #FFFFFF;
    }
    .header-box{
        padding: 46px 0 0 81px;
        position: absolute;
        top: 0;
        .user{
            font-size: 30px;
            font-weight: 700;
        }
        .context{
            font-size: 18px;
            font-weight: 400;
        }
    }
    .chartBox{
        display: flex;
        margin-top: 16px;
        width: 100%;
        .chart-left{
            width: 60%;
            .chart-left-top{
                display: flex;
                .bar{
                    // width: 420px;
                    width: 50%;
                    height: 288px;
                    border-radius: 8px;
                    background-color: #FFFFFF;
                    margin-right: 16px;
                    // padding-top: 20px;
                    padding: 20px 10px 10px 10px;
                }
                .pie{
                    // width: 420px;
                    width: 48.5%;
                    height: 288px;
                    border-radius: 8px;
                    background-color: #FFFFFF;
                    // padding-top: 20px;
                    padding: 20px 10px 10px 10px;
                }
            }
            .chart-left-bottom{
                width: 100%;
                height: 288px;
                border-radius: 8px;
                background-color: #FFFFFF;
                margin-top: 16px;
                display: flex;
                justify-content: center;
                // padding-top: 20px;
                padding: 20px 10px 10px 10px;
            }
        }
        .chart-right{
            width: 46%;
            // width: 524px;
            height: 592px;
            border-radius: 8px;
            background-color: #FFFFFF;
            margin-left: 16px;
            padding: 20px 10px 10px 10px;
        }
    }
}